import React, { Component } from 'react'
import "./App.less"
import YTKAlert from "@/components/YTKAlert/YTKAlert"
import Tabbar from "@/components/Tabbar/Tabbar"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
import { alertDispatchFn, showYTKAlert } from './utils'

class App extends Component {
    render() {
        return (
            <div>
                <YTKAlert></YTKAlert>
                {this.props.children}
                <Tabbar></Tabbar>
            </div>
        )
    }

    hdClick() {
        showYTKAlert(this.props, "info", "抽离后的内容");
        // 显示YTKAlert
        // this.props.showAlertFn({
        //     showAlert: true,
        //     alertType: "success",
        //     alertContext: "测试显示是否成功"
        // })

        //  1.5秒后隐藏
        // setTimeout(() => {
        //     this.props.hideAlertFn()
        // }, 1500)
    }

    componentDidMount() {
        if (this.props.location.pathname === "/") {
            // 跳转到  /home
            this.props.history.push("/home")
        }
    }
}

// 为什么要抽离?因为任意组件都可能调用YTKAlert这个组件
// 一旦调用就得有showAlertFn和hideAlertFn这两个方法
// 所以这两方法要抽离

// 为什么不把整个mapDispatchToProps都抽离出去?
// 如果有其他的组件,需要在这个组件里面使用,并且修改到redux中的数据,那就得在mapDispatchToProps这里定义方法,所以不能整个mapDispatchToProps都抽离出去.
// 这里站在项目管理和维护的角度上去考虑

const mapDispatchToProps = dispatch => {
    return {
        ...alertDispatchFn(dispatch)
    }
}

export default connect(null, mapDispatchToProps)(withRouter(App))
